import { FC } from 'react';
import { Image, Pressable, StyleSheet, View } from 'react-native';

import IconSearch from '@svgs/icon_search.svg';
import IconSetting from '@svgs/icon_setting.svg';
import Logo from '@svgs/tabs/icon_logo.svg';

import useHomeHeaderBar from './hook';
import { pxToVh, pxToVw } from '@/utils/pxToVx';

interface HomeHeaderBarProps {
  search?: {
    categoryCode: string;
  };
  showSetting?: boolean;
}

const HomeHeaderBar: FC<HomeHeaderBarProps> = ({ search, showSetting = false }) => {
  const {
    handleClickSetting,
    // handleClickReferAndEarn,
    handleClickVipCard,
    handleOpenSearchModal,
  } = useHomeHeaderBar();

  return (
    <View style={styles.header}>
      <Logo />
      <View style={styles.actions}>
        <View style={styles.flags}>
          {/* <Pressable style={styles.flag} onPress={handleClickReferAndEarn}>
              <Image
                source={require('@/assets/images/icon_ref.png')}
                style={styles.flag_icon}
              />
              <Text style={styles.flag_text}>REF</Text>
            </Pressable> */}
          <Pressable onPress={handleClickVipCard}>
            <Image source={require('@/assets/images/home/icon_vip.png')} style={styles.flag} />
          </Pressable>
        </View>
        {search ? (
          <Pressable onPress={() => handleOpenSearchModal(search.categoryCode)}>
            <IconSearch />
          </Pressable>
        ) : null}
        {showSetting && (
          <Pressable onPress={handleClickSetting}>
            <IconSetting />
          </Pressable>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    height: pxToVh(44),
    paddingHorizontal: pxToVw(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  actions: {
    flexDirection: 'row',
    columnGap: pxToVw(13),
  },
  flags: {
    flexDirection: 'row',
    columnGap: pxToVw(8),
  },
  flag: {
    width: pxToVw(65),
    height: pxToVw(24),
  },
});

export default HomeHeaderBar;
